<template>
  <page-header-wrapper v-loading="loading">
    <a-card :bordered="false">
      <a-form-model ref="form" :rules="rules" :model="form" :labelCol="{ span: 3 }" :wrapperCol="{ span: 17 }">
        <a-form-model-item label="上级" prop="parent_id">
          <a-select v-model="form.parent_id" allowClear>
            <a-select-option :value="0"> 顶级 </a-select-option>
            <a-select-option v-for="item of parent_list" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="名称" prop="name">
          <a-input placeholder="请输入名称" v-model="form.name"> </a-input>
        </a-form-model-item>

        <a-form-model-item label="类型" prop="type">
          <a-radio-group v-model="form.type">
            <a-radio :value="0">链接</a-radio>
            <a-radio :value="1">关键字</a-radio>
            <a-radio :value="2">小程序</a-radio>
            <a-radio :value="3">图文</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item label="值" prop="value" v-if="[0, 1].includes(form.type)">
          <a-input placeholder="请输入值" v-model="form.value"> </a-input>
        </a-form-model-item>

        <template v-if="form.type === 2">
          <a-form-model-item label="APPID" prop="appid" help="要打开的小程序 APPID">
            <a-input placeholder="请输入APPID" v-model="form.appid"> </a-input>
          </a-form-model-item>
          <a-form-model-item
            label="小程序路径"
            prop="pagePath"
            help="打开的页面路径，如pages/index/index，开头请勿加“/”"
          >
            <!-- <a-input placeholder="请输入小程序路径" v-model="form.pagePath"> </a-input> -->
            <div class="flex">
              <div class="inp">
                <a-input placeholder="请选择链接" disabled :value="form.pagePath"> </a-input>

                <!-- <template v-if="params && params.length">
                  <div class="flex" v-for="item of params">
                    <em>{{ item.key }}:</em>
                    <a-input v-model="item.value" @change="changeVal" :placeholder="item.desc" />
                  </div>
                </template> -->
              </div>
              <a-button class="btn" type="primary" @click="showLink2 = true"> 选择 </a-button>
              <a-button class="btn" type="danger" @click="form.pagePath = ''"> 清空 </a-button>
            </div>
          </a-form-model-item>
        </template>

        <template v-if="form.type === 3">
          <a-form-model-item label="标题" prop="title">
            <a-input placeholder="请输入标题" v-model="form.title"> </a-input>
          </a-form-model-item>
          <a-form-model-item label="描述" prop="desc">
            <a-input placeholder="请输入描述" v-model="form.desc"> </a-input>
          </a-form-model-item>
          <a-form-model-item label="图片" prop="pic">
            <cyyUploadImg
              @uploadSuccess="
                (e) => {
                  form.pic = e.data
                }
              "
              @deleteImg="form.pic = ''"
              :imgSrc="form.pic"
              imgSizeText="100*100"
            >
            </cyyUploadImg>
          </a-form-model-item>
          <a-form-model-item label="链接" prop="link">
            <div class="flex">
              <div class="inp">
                <a-input placeholder="请选择链接" disabled :value="form.link"> </a-input>

                <!-- <template v-if="params && params.length">
                  <div class="flex" v-for="item of params">
                    <em>{{ item.key }}:</em>
                    <a-input v-model="item.value" @change="changeVal" :placeholder="item.desc" />
                  </div>
                </template> -->
              </div>
              <a-button class="btn" type="primary" @click="showLink = true"> 选择 </a-button>

              <a-button class="btn" type="danger" @click="form.link = ''"> 清空 </a-button>
            </div>
          </a-form-model-item>
        </template>

        <a-form-model-item label="排序">
          <a-input-number :min="0" v-model="form.sort" :precision="0"></a-input-number>
        </a-form-model-item>
      </a-form-model>
      <a-divider />

      <div class="tc">
        <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
        <a-button @click="$router.back()" style="margin-left: 10px"> 返回 </a-button>
      </div>

      <new-select-link
        :type="1"
        v-if="showLink2"
        :parmas="{
          type: 2,
        }"
        @onOk="onOk2"
        @cancel="showLink2 = false"
      ></new-select-link>

      <new-select-link
        :type="1"
        :parmas="{
          type: 1,
        }"
        v-if="showLink"
        @onOk="onOk"
        @cancel="showLink = false"
      ></new-select-link>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { setMenuList, getMenuInfo } from '@/api/setting/wechatConfig'
import { cyyUploadImg } from '@/components/CyyUi'
import newSelectLink from '@/components/DiyNew/newSelectLink/index.vue'

export default {
  components: {
    cyyUploadImg,
    newSelectLink,
  },
  data() {
    return {
      params: [],
      showLink: false,
      showLink2: false,
      loading: false,
      btnLoading: false,
      id: 0,
      form: {
        name: '',
        type: 0,
        value: '',
        sort: 0,
        parent_id: 0,
        appid: '',
        pagePath: '',
        title: '',
        desc: '',
        pic: '',
        link: '',
        parent_id: 0,
      },
      rules: {
        parent_id: [{ required: true, message: '请选择', trigger: 'change' }],
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        pagePath: [{ required: true, message: '请输入', trigger: 'blur' }],
        appid: [{ required: true, message: '请输入', trigger: 'blur' }],
        value: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入', trigger: 'blur' }],
        link: [{ required: true, message: '请输入', trigger: 'blur' }],
        pic: [{ required: true, message: '请上传', trigger: 'change' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
  },

  created() {
    if (this.$route.query.id) this.id = this.$route.query.id
    this.getData()
  },

  methods: {
    onOk2(e) {
      this.showLink2 = false
      this.form.pagePath = e.link
    },

    onOk(e) {
      this.showLink = false
      this.form.link = e.link
    },

    getData() {
      let { id } = this

      this.loading = true
      getMenuInfo({ id })
        .then((res) => {
          if (!res.code) {
            let { parent_list, info } = res.data
            this.parent_list = parent_list
            this.form = info
          }
        })
        .catch(() => {})
        .then(() => {
          this.loading = false
        })
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setMenuList(this.form)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
                this.$router.back()
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
h4 {
  font-size: 16px;
  font-weight: bold;
}

.tc {
  text-align: center;
}

.ts {
  color: #ff0000;
}

.flex {
  display: flex;

  .inp {
    flex: 1;
    overflow: hidden;
  }

  .btn {
    margin-left: 10px;
  }
}
</style>
